<template>
  <div class="feedback-page flexbox flex-tb flex-center">
    <div class="title">
      <div class="row flexbox flex-align-center flex-justify-between">
        <h1 class="name capitalize">{{ $t('bottomItem.feedback') }}</h1>
      </div>
    </div>
    <div class="mode-cont address-cont">
      <div class="flexbox flex-align-center">
        <div class="item-cont-row flex-1" style="margin-right: 10px">
          <div class="row-label capitalize">{{ $t('formItem.name') }}</div>
          <div class="row-input">
            <el-input v-model="formInfo.name" :placeholder="$t('formPlaceholder.input')"></el-input>
          </div>
        </div>
        <div class="item-cont-row flex-1" style="margin-left: 10px">
          <div class="row-label capitalize">{{ $t('formItem.surname') }}</div>
          <div class="row-input">
            <el-input v-model="formInfo.surname" :placeholder="$t('formPlaceholder.input')"></el-input>
          </div>
        </div>
      </div>
      <div class="item-cont-row">
        <div class="row-label capitalize">{{ $t('formItem.problemDesc') }}</div>
        <div class="row-input">
          <el-input type="textarea" v-model="formInfo.problemDesc" :placeholder="$t('formPlaceholder.problemDesc')"></el-input>
        </div>
      </div>
      <div class="item-cont-row">
        <div class="row-label capitalize">{{ $t('formItem.uploadImg') }}</div>
        <div class="row-input flexbox flex-align-center">
          <div class="upload-list flexbox flex-align-center" v-if="uploadList.length">
            <div class="upload-item" v-for="(item, index) in uploadList" :key="index">
              <img
                loading="lazy"
                class="icon"
                src="https://cd.sealmg.com/assets/img/delete-mask-icon.png"
                alt="Delete image"
                title="Remove uploaded image"
                @click.stop="deleteCur(index)"
              />
              <img loading="lazy" class="img" v-lazy="$globalFn.imgPrefixUrl(item)" alt="Uploaded feedback image" title="Feedback attachment" />
            </div>
          </div>
          <LazyUploadFile v-if="uploadList.length < 3" showType="box" @uploadSuccess="uploadSuccess" />
        </div>
      </div>
      <div class="item-cont-row">
        <div class="row-label capitalize">
          {{ $t('formItem.countryRegion') }}
        </div>
        <div class="row-input">
          <LazyCountrySelect class="input" :showPrefix="false" :showDefault="false" @itemChange="countryChange" />
        </div>
      </div>
      <div class="item-cont-row">
        <div class="row-label capitalize">{{ $t('formItem.concatPhone') }}</div>
        <div class="row-input">
          <el-input v-model="formInfo.concatPhone" :placeholder="$t('formPlaceholder.input')"></el-input>
        </div>
      </div>
      <div class="lg:flex hidden flex-col">
        <div class="handle flexbox flex-align-center !justify-center flex !w-full">
          <el-button class="theme-btn !w-full" :disabled="isFormInfoComplete" @click="svaeFormInfo">
            {{ $t('formBtn.submit') }}
          </el-button>
        </div>
      </div>
    </div>
    <LazyH5footer>
      <el-button class="theme-btn" :disabled="isFormInfoComplete" @click="svaeFormInfo">
        {{ $t('formBtn.submit') }}
      </el-button>
    </LazyH5footer>
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  export default {
    layout: 'newsHome',
    name: 'feedback',
    data() {
      return {
        uploadList: [],
        formInfo: {
          name: '',
          surname: '',
          problemDesc: '',
          img: '',
          country: '',
          phonePrefix: '',
          concatPhone: ''
        }
      }
    },
    head() {
      return {
        title: 'Feedback - SEALMG',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'If you have any opinions or suggest for SEALMG, you can feedback to help us improve our website.'
          }
        ]
      }
    },
    computed: {
      isFormInfoComplete() {
        const { name, surname, problemDesc, country, concatPhone } = this.formInfo
        return !(name && surname && problemDesc && country && concatPhone, this.uploadList.length)
      },
      countryList() {
        let initData = this.$store.state.initData.initData
        let list = []
        if (initData.regions && initData.regions.length) {
          initData.regions.map(item => {
            if (item._child && item._child.length) {
              list.push(...item._child)
            }
          })
        }
        return list || []
      }
    },
    //   beforeRouteUpdate(to, from, next) {
    //     this.tabId=to.query.type
    //     next()
    //   },
    created() {},
    methods: {
      uploadSuccess(val) {
        this.uploadList.push(val)
      },
      deleteCur(index) {
        this.uploadList.splice(index, 1)
      },
      countryChange(item) {
        this.formInfo.country = item.name
        this.formInfo.phonePrefix = item.phone_code
      },
      resetFormInfo() {
        this.uploadList = []
        this.formInfo = {
          name: '',
          surname: '',
          problemDesc: '',
          img: '',
          country: '',
          phonePrefix: '',
          concatPhone: ''
        }
      },
      svaeFormInfo: throttle(
        function () {
          if (
            this.formInfo.name &&
            this.formInfo.surname &&
            this.formInfo.problemDesc &&
            this.formInfo.country &&
            this.formInfo.concatPhone &&
            this.uploadList.length
          ) {
            let opts = {
              first_name: this.formInfo.name,
              last_name: this.formInfo.surname,
              description: this.formInfo.problemDesc,
              image: this.uploadList.join(','),
              country: this.formInfo.country,
              phone_code: this.formInfo.phonePrefix,
              contact: this.formInfo.concatPhone
            }
            this.$axios
              .post('/api/feedback/save', opts, {
                setConfig: { showSuccessMsg: true }
              })
              .then(res => {
                this.resetFormInfo()
              })
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      )
    }
  }
</script>
<style lang="less" scoped>
  .feedback-page {
    .title {
      width: 590px;
      box-sizing: border-box;
      padding: 20px 24px 12px 24px;
      .row {
        padding-bottom: 8px;
        border-bottom: @border-1-fo;
      }
      .name {
        font-weight: 500;
        font-size: 22px;
        color: @font-color-14;
      }
    }
    .mode-cont {
      box-sizing: border-box;
      margin-top: 8px;
      padding: 24px 16px;
      width: 590px;
      .item-cont-row {
        margin-bottom: 16px;
        .row-label {
          margin-bottom: 8px;
          font-weight: 500;
          font-size: 14px;
          color: @font-color-66;
        }
        /deep/.el-input__inner {
          height: 48px;
          line-height: 48px;
        }
        .upload-list {
          .upload-item {
            position: relative;
            width: 88px;
            height: 88px;
            border-radius: 8px;
            margin-right: 16px;
            .img {
              width: 88px;
              height: 88px;
            }
            .icon {
              position: absolute;
              top: 0;
              right: 0;
              width: 18px;
              height: 18px;
            }
          }
        }
        .row-desc {
          margin-top: 6px;
          padding-left: 4px;
          font-size: 12px;
          color: @font-color-99;
          line-height: 20px;
        }
      }
      .handle {
        padding: 0px 0 24px 0;
        .default-btn {
          width: 120px;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          font-weight: 400;
          border-radius: 25px;
        }
        .theme-btn {
          width: 260px;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          font-weight: 500;
          border-radius: 25px;
        }
      }
    }
    .address-cont {
      /deep/ .el-textarea__inner {
        padding: 16px;
        font-weight: 500;
        font-size: 14px;
        color: @font-color-14;
        height: 80px;
        min-height: 80px;
        max-height: 80px;
        background: @color-f7;
        border-radius: 8px;
        border: none;
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .feedback-page {
      width: 100%;
      .title {
        width: 100%;
        box-sizing: border-box;
        padding: 16px 16px 8px 16px;
        .row {
          padding-bottom: 8px;
          border-bottom: @border-1-fo;
        }
        .name {
          font-weight: 500;
          font-size: 20px;
          color: @font-color-14;
        }
      }
      .mode-cont {
        width: 100%;
        margin-top: 8px;
        padding: 16px;
        box-sizing: border-box;
        .item-cont-row {
          margin-bottom: 16px;
          /deep/.el-input__inner {
            height: 40px;
            line-height: 40px;
          }
          .row-label {
            margin-bottom: 8px;
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
          }
          .row-desc {
            margin-top: 4px;
            padding-left: 0px;
            font-size: 12px;
            color: @font-color-99;
          }
        }
        .handle {
          padding: 0px;
          margin-top: 24px;
          .default-btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            margin-right: 8px;
          }
          .theme-btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            margin-left: 0px;
          }
        }
      }
      .address-cont {
        margin-top: 0px;
        /deep/ .el-textarea__inner {
          height: 96px;
          min-height: 96px;
          max-height: 96px;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .feedback-page {
      width: 100%;
      .title {
        width: 100%;
        box-sizing: border-box;
        padding: 16px 16px 8px 16px;
        .row {
          padding-bottom: 8px;
          border-bottom: @border-1-fo;
        }
        .name {
          font-weight: 500;
          font-size: 20px;
          color: @font-color-14;
        }
      }
      .mode-cont {
        width: 100%;
        margin-top: 8px;
        padding: 16px;
        box-sizing: border-box;
        .item-cont-row {
          margin-bottom: 16px;
          /deep/.el-input__inner {
            height: 40px;
            line-height: 40px;
          }
          .row-label {
            margin-bottom: 8px;
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
          }
          .row-desc {
            margin-top: 4px;
            padding-left: 0px;
            font-size: 12px;
            color: @font-color-99;
          }
        }
        .handle {
          padding: 0px;
          margin-top: 24px;
          .default-btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            margin-right: 8px;
          }
          .theme-btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 25px;
            margin-left: 0px;
          }
        }
      }
      .address-cont {
        margin-top: 0px;
        /deep/ .el-textarea__inner {
          height: 96px;
          min-height: 96px;
          max-height: 96px;
        }
      }
    }
  }
</style>
